<template>
<div class="body">
  <van-row style="background-color:#171a21">
        <van-col >
          <img class="logo" src="https://store.st.dl.pinyuncloud.com/public/shared/images/header/logo_steam.svg?t=962016" alt="">
        </van-col>
        <van-col ><van-search @search="search" class="search1" v-model="sval" placeholder="请输入搜索关键词"  /></van-col>
        <van-col >
          <div class="dlog" v-if="$store.state.islogin">欢迎:{{$store.state.account}}</div>
          <div v-else @click="login" class="logbtn">登录</div>
        </van-col>
  </van-row>
  <van-tabs @click="tab">
    <van-tab     v-for="(n,inx) in items" :key="inx" :title="n.text ">
      <div class="myimg">
        <van-swipe class="my-swipe" :autoplay="3000">
          <van-swipe-item  v-for="(item, index) in images" :key="index">
            <router-link  :to="`/details?id=${item.id}`">
            <img style="width:100%;height:180px;"  :src="`${item.img}`" />
            </router-link>
          </van-swipe-item>
        </van-swipe>
      </div>
    </van-tab>
  </van-tabs>
  <van-row style="font-size:0.12rem;background-color: #1b2838" class="lt">
    <van-col span="8">
      <i class="icon-1"><van-icon size=".33rem" name="cart-o" color="#1989fa" /></i>
      <span>世界级游戏商城</span>
    </van-col>
    <van-col span="8">
      <i class="icon-2"><van-icon size=".33rem" color="#1989fa" name="friends-o" /></i>
      <span>庞大的创意工坊</span>
    </van-col>
    <van-col span="8">
      <i class="icon-3"><van-icon size=".33rem" color="#1989fa" name="chat-o" /></i>
      <span>日在线过亿</span>
    </van-col>
  </van-row>
  <div style="background-color:black">
<van-grid :column-num="3" >
  <van-grid-item id="gg"  style="font-size:0.12rem;background-color:black" v-for="(n,inx) in game" :key="inx"  >
    <router-link :to="`/details?id=${n.gid}`">
    <img class="vimg" :src="`${n.gimg}`" >
    <div class="grid">
    {{n.gname}}</div>
    </router-link>
  </van-grid-item>
</van-grid>
</div>
  <div class="dyouhui" style="font-size:0.1rem;">
    <label style="font-size:0.3rem;" for="">特别优惠</label>
    <a href="#">浏览更多</a>
  </div>
<tab-bar></tab-bar>
  
  <van-tabbar v-model="active" fixed placeholder>
    <van-tabbar-item name="home" icon="home-o">首页</van-tabbar-item>
    <van-tabbar-item to="/fl?id=0" name="find" icon="search" dot>分类</van-tabbar-item>
    <van-tabbar-item to="/com" name="com" icon="friends-o" badge="5">社区</van-tabbar-item>
    <van-tabbar-item to="/me"  name="me" icon="manager-o">个人中心</van-tabbar-item>
  </van-tabbar>
</div>
</template>


<script>
import '../assets/css/sy.css'
import TabBar from '../components/dbdhl.vue'

export default {
  
  components:{
    TabBar
  },
data() {
  return {
    game:'',
    sval:'',
    items:[{ text: '全部' }, { text: '开放世界生存制作' },{ text: '沙盒' },{ text: '生存' },{ text: '僵尸' },{ text: '动作' },{ text: '在线合作' },{ text: '大逃杀' },{ text: '多人' },{ text: '武术' },{ text: '策略' },{ text: '回合战略' },{ text: '历史' },{ text: '射击' },{ text: '独立' },{ text: '恐怖' },{ text: '解密' },{ text: '太空' },{ text: '科幻' },{ text: '竞速' },{ text: '驾驶' },{ text: '塔防' },{ text: '唯美' },{ text: '类银河战士恶魔城' }],
    images:[
      {id:2,img:'https://media.st.dl.pinyuncloud.com/steam/apps/924970/capsule_616x353.jpg?t=1634317785'},
      {id:3,img:'https://media.st.dl.pinyuncloud.com/steam/apps/1203220/header_schinese.jpg?t=1637325041'},
      {id:4,img:'https://media.st.dl.pinyuncloud.com/steam/apps/1124300/capsule_616x353.jpg?t=1634550216'},
      {id:5,img:'https://media.st.dl.pinyuncloud.com/steam/apps/1057090/capsule_616x353.jpg?t=1612897638'}
    ],
    games:[
     
        {imgurl:require('../assets/zd.jpg'),
        text:'战地5'},
        { imgurl:require('../assets/yh.jpg'),
        text:'烟火'},
        { imgurl:require('../assets/qx.jpg'),text:'群星'},
        { imgurl:require('../assets/1.jpg'),text:'尘埃5'},
        { imgurl:require('../assets/tw.jpg'),text:'太吾绘卷'},
        { imgurl:require('../assets/zw.jpg'),text:'植物大战僵尸'},
      ],
      active:'home',
      sea:'',
    
  }
},
methods:{
  tab(index,title){
    this.$router.push(`./Fl?id=${index}`)
  },
  login(){
    this.$router.push('/log')
  },
  search(e){

    this.$router.push(`/search?val=${e}`)

  }
},
    mounted(){
        
  this.axios.get('/game').then((result)=>{
    // console.log(result.data.results);
    this.game=result.data.results.splice(0,6);
 


  })
    },
  watch: {
    /** 监视selected的变化 */
    active(newval, oldval){
      if(newval=='me'){ // 点击了me选项卡
        this.$router.push('/me');
      }
    },
  }
  
}
</script>
<style scoped>
.dlog{
  width: 1.3rem;
  margin-top: 0.4rem;
  margin-left: 0.1rem;
  font-size: 0.2rem;
  color: white;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.logo{
  width: 1.8em;height: .9em;
 margin: 0.1rem 0 0 0.1rem;
}
.search1{
  
  width: 3.1rem;border: 0;
  margin: 0.28rem 0 0 0;padding: 0;

}
.van-search__content {
  background-color:#316282;color:#666;
  color: #fff;
  
  
}
/deep/.van-field__control {
    color: #fff;
}
.logbtn{
  color: #fff;
  width: 0.8rem;
  font-size: .25em;
  background-color: #0af;
 text-align: center;
  border-radius: 2em;
  margin: 0.4rem 0 0 0.24rem
}
.myswipe .van-swipe-item{
  height: 100%;
  width: 100%;
}
.myimg img{
  display: block;
  width: 100%;
  height: 100%;
  
}
.lt{
  text-align: center;
  
  height: .6rem;line-height: .4rem;
}
.lt i{
  display: inline-block;
  background-repeat: no-repeat;
  background-size: 100%;
  width: .4rem;height: .4rem;
  vertical-align: middle;
}
.vimg{
width: 1.712rem;
height: 0.8rem;
}
.dyouhui{
  display: block;
}

/deep/ .van-grid-item__content{
  background-color: #1b2838;
}
/deep/ .van-tabs__wrap--scrollable .van-tab{
  background-color: #1b2838;
  
}
/deep/ .van-tabs__nav--line.van-tabs__nav--complete{
  padding-left: 0;
}
/deep/ .van-tabbar{
  background-color: rgb(23, 26, 33);
}
.van-tabbar-item--active{
    background-color: rgb(23, 26, 33);
}
.grid{
  color: white;
  text-align: center;
}
/deep/ .van-tabs__nav--line.van-tabs__nav--complete{
  padding-right: 0;
}
</style>